<template>
    <view>
        <view class="list-header" v-if="activityList.length > 0" data-flex="main:center cross:center">
            <img src="../../static/langwen/header_l.png" alt="">
            <text>逛促销</text>
            <img src="../../static/langwen/header_r.png" alt="">
        </view>
		<view class="tips" v-else>
			当前没有活动哦
		</view>
        <view class="section-box" :style="{backgroundColor: (index ? '#fff' : '#f5f5f5'), paddingTop: (index ? '20px' : '0')}" v-for="(dayData,index) in activityList" :key="index">
            <!-- <view class="section-title">以下商品参与限时秒杀</view> -->
            <view class="sec-header">
                <view class="sec-left">
                    <view>促销时间：{{ dayData.startTime | fnContentTime }}</view>
                    <text>促销规则：{{ dayData.name }}</text>
                </view>
                <view class="sec-right">{{ dayData.endTime | fnContentTime }}结束促销</view>
            </view>
            <view class="list-container" v-if="dayData.goodsDs.length">
                <item :item="item" v-for="(item,subIndex) in dayData.goodsDs" v-if="dayData.isOpen ? true : subIndex < 6" :key="subIndex"></item>
            </view>
            <view v-else class="tips" style="padding: 80rpx 0;">
                这个活动暂时没有商品
            </view>
            <view @click="toggleIsOpen('open',index)" v-show="!dayData.isOpen && dayData.goodsDs.length > 6" class="show-box">
                展开
                <img src="@/static/langwen/active_down.png" alt="">
            </view>
            <view @click="toggleIsOpen('close',index)" v-show="dayData.isOpen && dayData.goodsDs.length > 6" class="show-box">
                收起
                <img src="@/static/langwen/active_up.png" alt="">
            </view>
        </view>
    </view>
</template>

<script>
import Api from '@/common/api';
import item from '@/components/langwen/item'
export default {
	name: 'activity',
    components: {
        item
    },
    data() {
        return {
            // 活动数据
            activityList: ''
        }
    },
    created() {
        this.getActivityList();
    },
    methods: {
        // 活动列表
        async getActivityList() {
            var params = {};
            var data = await Api.apiCall('get', Api.index.activityList, params);
            for(let i = 0;  i < data.length; i++) {
                // 返回的商品数据是字符串,需要转换一下
                if(data[i].goodsDs) {
					data[i].goodsDs = JSON.parse(data[i].goodsDs);
				}else {
                    data[i].goodsDs = [];
                }
				// 当前活动高度是否展开, 默认为 false , 展开为 true
				data[i].isOpen = false;
            }
            this.activityList = data;
        },
		// 切换展开状态
		toggleIsOpen(txt, index) {
			if(txt === 'open') {
				this.$set(this.activityList[index], 'isOpen', true);
			} else if(txt === 'close') {
				this.$set(this.activityList[index], 'isOpen', false);
			}
		}
    }
}
</script>

<style lang="less">
.list-header {
    padding: 30upx 0 10upx 0;
    img {
        width: 44upx;
        height: auto;
        height: 4px;
    }
    text {
        margin: 0 20upx;
        font-size:18px;
        font-weight:500;
        color:rgba(90,194,255,1);
    }
}

.section-box {
    margin-bottom: 20upx;
    .list-container {
        display: flex;
        flex-wrap: wrap;
    	background:rgba(255,255,255,1);
    	box-shadow:0px -2px 8px 0px rgba(0,0,0,0.1);
    }
    .show-box {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:14px;
        font-weight:400;
        color:rgba(253,155,67,1);
        padding-bottom: 30upx;
        background-color: #fff;
        img {
            margin-left: 10rpx;
            width: 24rpx;
            height: 24rpx;
        }
    }
}
.section-title {
    text-align: center;
    font-size:12px;
    font-weight:400;
    color:rgba(51,51,51,1);
}
.sec-header {
    display: flex;
    justify-content: space-between;
    color: #fff;
    margin: 30upx 30upx 0;
    background:linear-gradient(270deg,rgba(255,158,53,1) 0%,rgba(255,101,24,1) 100%);
    border-radius:10px 10px 0px 0px;
    padding: 0 26rpx;
    .sec-left {
        view {
            margin: 12upx 0 4upx;
            font-size:14px;
        }
        text {
            font-size:11px;
            vertical-align: text-top;
        }
    }
    .sec-right {
        margin-top: 22upx;
        font-size:12px;
        font-weight:500;
    }
}

.tips {
	padding-top: 160rpx;
	text-align: center;
	font-size: 28rpx;
}
</style>